(function (Vue) {
    'use strict';

    // Your starting point. Enjoy the ride!
    new Vue({
        el: '.wrapper',
        data: {
            warningInfo: [],
            interval: 2000,  //刷新间隔时间
            reduceCarbon: 142573448   //减少碳排放量
        },
        created: function () {
            $.ajax({
                url: "../linyang/json/interval.json",
                type: "post",//请求方式为get
                dataType: "json",
                // async: true,
                success: function (data) {
                    this.interval = data.interval;
                }
            })
        },
        mounted() {
            this.getOeeData();
            this.drawGauge('gauge1', '电池片碎片', 88);
            this.drawGauge('gauge2', '电池片良率', 88);
            this.drawGauge('gauge3', '电池性能良率', 88);
            this.drawGauge('gauge4', '计划达成率', 88);
            this.getProductionData();
            this.getEtaData();
            this.getCPKData();
            this.getWarningData();
            this.getQcData();
        },
        methods: {
            getReduceCarbon() {
                var _this = this;
                const increaseTree = 370; //每分钟增长的树木数量
                setInterval(function () {
                    _this.reduceCarbon += increaseTree
                }, 1000 * 60)
            },
            drawOee(xData, yData) {

                var myChart = echarts.init(document.getElementById('oee'));
                var grayBar = [100, 100, 100, 100];

                var option = {
                    grid: {
                        top: '1%',
                        left: '1%',
                        right: '0',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        show: false
                    },
                    yAxis: {
                        type: 'category',
                        data: ['PM(维护)', 'IDLE(等待)', 'DOWN(故障)', 'RUN(运行)'],
                        // date: yData,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            width: 0,
                            color: '#fff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            // show: true,
                            type: 'bar',
                            barGap: '-100%',
                            barWidth: '30%', //统计条宽度
                            itemStyle: {
                                normal: {
                                    // barBorderRadius: 20,
                                    color: 'rgb(67,111,171)'
                                },
                            },
                            z: 1,
                            data: grayBar,
                        },
                        {
                            // show: true,
                            type: 'bar',
                            barGap: '-100%',
                            barWidth: '30%', //统计条宽度
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, color: '#fff', position: 'right',
                                        textStyle: {
                                            color: 'black'
                                        }
                                    },
                                    color: '#32DAD5'
                                }
                            },
                            // data: [4, 4, 10, 80]
                            data: xData
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            getWarningData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/production/warning.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {
                            _this.warningInfo = data;

                        }
                    })
                }, _this.interval)
            },
            getOeeData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/production/oee.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {

                            var [subState, time] = [[], []];

                            data.forEach(item => {
                                subState.push(item.subState);
                                time.push(item.time);
                            });
                            _this.drawOee(time, subState)
                        }
                    })
                }, _this.interval)
            },
            drawGauge(id, name, data) {

                var myChart;
                if (myChart != null && myChart != "" && myChart != undefined) {
                    myChart.dispose();
                }
                myChart = echarts.init(document.getElementById(id));

                var option = {
                    series: [{
                        name: name,
                        type: "gauge",
                        startAngle: 195,
                        endAngle: -15,
                        min: 0,                 // 最小的数据值,默认 0 。映射到 minAngle。
                        max: 100,
                        radius: "90%",
                        center: ["50%", "50%"],
                        axisLine: {
                            show: true,
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[1, '#4ddfff']],
                                width: '6',
                            }
                        },
                        axisTick: {
                            show: false //小刻度
                        },
                        axisLabel: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        pointer: {
                            show: true,
                            width: "1%",
                            length: '90%',
                            color: "red"
                        },
                        detail: {
                            show: true,
                            formatter: '{value}%',
                            offsetCenter: ['0', '25%'],
                            textStyle: {
                                fontSize: 24
                            }
                        },
                        itemStyle: {            // 仪表盘指针样式。
                            color: "#fff",          // 指针颜色，默认(auto)取数值所在的区间的颜色

                        },
                        title: {                // 仪表盘标题。
                            show: true,             // 是否显示标题,默认 true。
                            offsetCenter: [0, "60%"],//相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
                            color: "#fff",          // 文字的颜色,默认 #333。
                            fontSize: 20,           // 文字的字体大小,默认 15。
                        },
                        data: [{
                            value: data,
                            name: name
                        }]
                    }]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            getQcData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/battery/qc.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {

                            var [xdata, ydata] = [[], []];

                            data.forEach(item => {
                                xdata.push(item.xdata);
                                ydata.push(item.ydata);
                            });
                            _this.drawQc(xdata, ydata)
                        }
                    })
                }, _this.interval)
            },
            drawQc(xdata, ydata) {
                console.log(ydata);
                var myChart;
                if (myChart != null && myChart != "" && myChart != undefined) {
                    myChart.dispose();
                }
                myChart = echarts.init(document.getElementById('qc'));


                var option = {
                    title: {
                        text: '',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['', '']
                    },
                    grid: {
                        top: '1%',
                        left: '1%',
                        right: '4%',
                        bottom: '0',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01],
                        show: false

                    },
                    yAxis: {
                        type: 'category',
                        data: xdata,
                        axisLabel: {
                            formatter: '{value}',
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            width: 0,
                            color: '#fff'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            data: ydata,
                            itemStyle: {
                                normal: {
                                    // barBorderRadius: 20,
                                    color: '#72d6d6'
                                },
                            },
                        },
                        {
                            name: '',
                            type: 'bar',
                            data: [75, 50, 60, 80, 80, 80],
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true, color: '#fff', position: 'right',
                                        textStyle: {
                                            color: 'black'
                                        }
                                    },
                                    color: '#287dc3'
                                }
                            },

                        }
                    ]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            getProductionData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/battery/production.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {

                            var [xdata, ydata1, ydata2] = [[], [], []];

                            data.forEach(item => {
                                xdata.push(item.xdata);
                                ydata1.push(item.ydata1);
                                ydata2.push(item.ydata2);
                            });
                            _this.drawProduction(xdata, ydata1, ydata2)
                        }
                    })
                }, _this.interval)
            },
            drawProduction(xdata, ydata1, ydata2) {
                var myChart;
                if (myChart != null && myChart != "" && myChart != undefined) {
                    myChart.dispose();
                }
                myChart = echarts.init(document.getElementById('production'));
                var option = {
                    grid: {
                        top: '15%',
                        left: '2%',
                        right: '0',
                        bottom: '1%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        }
                    },
                    legend: {
                        left: '70%',
                        top: 'top',
                        data: ['计划产量(english)', '实际产量'],
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    xAxis: {
                        name: '',
                        triggerEvent: true,
                        data: xdata,
                        axisLabel: {
                            interval: 0,
                            show: true,
                            textStyle: {
                                color: "#B4B5BE"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                show: false,
                                color: "#F3F3F3",
                                width: 2
                            }
                        }
                    },
                    yAxis: [{
                        name: '',
                        type: 'value',
                        nameTextStyle: {
                            "color": "#AEA4A8"
                        },
                        axisLabel: {
                            interval: 0,
                            show: true,
                            textStyle: {
                                color: "#B4B5BE"
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "#F3F3F3",
                                width: 2
                            }
                        },
                        splitLine: {
                            show: false
                        }
                    }
                    ,
                        // {
                        //     nameTextStyle: {
                        //         "color": "#AEA4A8"
                        //     },
                        //     axisLabel: {
                        //         interval: 0,
                        //         show: false,
                        //         textStyle: {
                        //             color: "#B4B5BE"
                        //         }
                        //     },
                        //     axisLine: {
                        //         lineStyle: {
                        //             color: "#F3F3F3",
                        //             width: 2
                        //         }
                        //     },
                        //     splitLine: {
                        //         show: false
                        //     }
                        //
                        // }
                    ],
                    series: [{
                        name: '计划产量(english)',
                        type: 'line',
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#72d6d6'
                            }
                        },
                        data: ydata1
                    }, {
                        name: '实际产量',
                        type: 'bar',
                        silent: true,
                        itemStyle: {
                            normal: {
                                color: '#287dc3'
                            }
                        },
                        data: ydata2
                    }]
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            getCPKData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/battery/cpk1.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {

                            var [xdata, ydata1, ydata2] = [[], [], []];

                            data.forEach(item => {
                                xdata.push(item.xdata);
                                ydata1.push(item.ydata1);
                                ydata2.push(item.ydata2);

                            });
                            console.log(xdata)
                            _this.drawCPK(xdata, ydata1, ydata2)
                        }
                    })
                }, _this.interval)
            },
            drawCPK(xdata, ydata1, ydata2) {
                var myChart;
                if (myChart != null && myChart != "" && myChart != undefined) {
                    myChart.dispose();
                }
                myChart = echarts.init(document.getElementById('cpk'));
                var option = {
                    grid: {
                        top: '15%',
                        left: '2%',
                        right: '0',
                        bottom: '1%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow',
                        }
                    },
                    legend: {},
                    xAxis: [
                        {
                            type: 'category',
                            data: xdata,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        },
                        {
                            type: 'value',
                            name: '',

                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '',
                            type: 'bar',
                            data: ydata1
                        },

                        {
                            name: '',
                            type: 'line',
                            yAxisIndex: 1,
                            data: ydata2
                        }
                    ]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            },
            getEtaData() {
                var _this = this;
                setInterval(function () {
                    $.ajax({
                        url: "../linyang/json/battery/eta.json",
                        type: "post",//请求方式为get
                        dataType: "json",
                        // async: true,
                        success: function (data) {

                            var [xdata, ydata] = [[], []];

                            data.forEach(item => {
                                xdata.push(item.xdata);
                                ydata.push(item.ydata);
                            });
                            _this.drawEta(xdata, ydata)
                        }
                    })
                }, _this.interval)
            },
            drawEta(xdata, ydata) {
                var myChart;
                if (myChart != null && myChart != "" && myChart != undefined) {
                    myChart.dispose();
                }
                myChart = echarts.init(document.getElementById('eta'));
                var option = {
                    legend: {
                        data: ['电量'],
                        // bottom:'90%'
                        left: '80%',
                        backgroundColor: '#1f2c51',
                        textStyle: {
                            color: '#08feff'
                        }
                    },
                    grid: {
                        top: '15%',
                        left: '2%',
                        right: '0',
                        bottom: '6%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: xdata,
                        axisLine: {
                            lineStyle: {
                                color: '#2d4f84'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#2d4f84'
                            }
                        }
                    },
                    series: [{
                        name: '电量',
                        data: ydata,
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#08feff'
                            }
                        },
                    }]
                };
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        }
    })
})(Vue);